<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>css 变量</title>
  </head>
  <style>
    /* css全局变量 :root */
    :root {
      --a: 300px;
      --color-primary: #224411;
      --header-height: 64px;

    }
    .foo {
      /* --a: 200px; */

      width: var(--a);
      background-color: var(--color-primary);
      height: calc(var(--a) * 2);
    }
    .bar {
      width: var(--a);
      /* width: 100px; */
      background-color: rebeccapurple;
      /* height: 100px; */
      height: var(--a);
    }
    header {
      /* height: calc(var(--header-height)*1px); */
      height: var(--header-height);
      background-color: var(--color-primary);
    }
    main {
      /* calculate */
      height: calc(100vh - var(--header-height));
      background-color: antiquewhite;
    }
    body {
      margin: 0;
      padding: 0;
    }
  </style>
  <body>
    <!-- <div class="foo"></div> -->
    <!-- <div class="bar"></div> -->
    <header>xx</header>
    <main>xx</main>
  </body>
</html>
